<template>
  <el-menu
        :style="{ width: !isCollapse ? '220px':'50px' }"
        style="overflow: hidden"
        active-text-color="#ffd04b"
        background-color="#545c64"
        class="aside-container"
        default-active="2"
        text-color="#fff"
        @open="handleOpen"
        @close="handleClose"
        @collapse="isCollapse"
      >
      <p class="logo-lg">{{isCollapse ? '用工':'用工管理'}}</p>
        <TreeMenu :index="1" :menuData = "menuData" />
      </el-menu> 

</template>

<script setup>
import TreeMenu from './treeMenu.vue'

import { useRouter } from 'vue-router'
import { reactive,computed } from 'vue'
import { useStore } from 'vuex' 
import { isHidden } from 'element-plus/es/components/focus-trap/index.mjs';

const router = useRouter()
const menuData=reactive(router.options.routes[0].children)
const store = useStore()
let isCollapse=computed(() => store.state.menu.isCollapse)


//console.log(router,'router')
const handleOpen = () => {

}
const handleClose = () => {

}

</script>

<style lang="less" scoped>
.aside-container{
    height: 100%;
    .logo-lg{
        font-size: 20px;
        text-align: center;
        height: 50px;
        line-height: 50px;
        color: #fff;
    }
}
</style>